<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>条形码识别测试</title>
    <script src="js/quagga.min.js" type="text/javascript"></script>
</head>
<body>
    <!-- 摄像头展示区域 -->
	<div class="box">
		<div id="canvanCode" style="border: 1px solid red;"></div>
		<button class="box-button" onclick="openQuagga()">开始识别</button>
		<input class="box-input" id="resultCode"/>
		<div>当前测试情况</div>
		<div style="font-size: 30px;">临时比较值：<input id="temCode"/></div>
		<div style="font-size: 30px;">比较次数：<input id="checkNum"/></div>
	</div>
	
    
    <script>
		//识别出来
		//存储第一个比较值
		//等待10次识别，是否都等同于第一个值
		//是则确定，清空比较值，结束 
		//否则把本相同的那个值拿出来 存储为比较值
		
		let temCode = ''
		let checkNum = 0
		function checkCode(code){
			//存储第一个比较值
			if(temCode===''){
				temCode = code
			}
			//是否等同于比较值
			if(code === temCode){
				//是则确定，清空比较值，结束 
				checkNum++
				if(checkNum===5){
					temCode = ''
					checkNum = 0
					return true
				}
			}else{
				//否则把本相同的那个值拿出来 存储为比较值
				temCode = code
				checkNum = 0
			}
		}
		
		function openQuagga(){
			document.querySelector('#resultCode').value = ''
			Quagga.init({
			    inputStream : {
			        name : "Live",
			        type : "LiveStream",
					constraints: {
						width: 500,
						height: 1000,
					},
			        target: document.querySelector('#canvanCode')
			    },
			    decoder : {
			        readers : ["ean_reader",'code_39_reader','code_128_reader'],
			        debug: {
			            drawBoundingBox: false,
			            showFrequency: false,
			            drawScanline: false,
			            showPattern: false,
			        },
			        multiple: false
			    }
			}, ()=>{
			    //打开摄像头
			    Quagga.start();
				//data.codeResult.code就是摄像头扫描出的商品条形码
				//Tip:只要摄像头一识别到条形码就会显示在控制台，有时候一识别就显示十几行条形码，所以我们可以使用节流，减少扫码的次数。
			    Quagga.onDetected(function(data){
					if(checkCode(data.codeResult.code)){
						document.querySelector('#resultCode').value = data.codeResult.code
						Quagga.stop();
					}
					document.querySelector('#temCode').value = temCode
					document.querySelector('#checkNum').value = checkNum
			    });
			});
		}
		
    </script>
</body>
</html>
<style>
	.box{
		border: 1px solid #000;
		width: 100vw;
		height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.box-button{
		padding: 10px;
		font-size: 20px;
		margin: 20px 0;
	}
	.box-input{
		width: 50%;
		font-size: 40px;
	}
</style>
